// 220906 liang 设置 echarts 初始化选项
// 微信小程序中使用echarts：https://blog.csdn.net/qq_38987146/article/details/120324006
let options = {
  // 饼图
  pie: {
    tooltip: {                  // 提示框
      show: true,               // 是否显示提示框组件
      trigger: 'item',          // 触发类型 'item'|'axis'|'none'
      textStyle: {              // 提示框浮层的文本样式
        fontSize: 12,
      },
    },
    series: [
      {
        label: {                 // 饼图图形上的文本标签
          fontSize: 12,
          formatter: '{b}: {c}',
        },
        type: 'pie',
        // center: ['50%', '50%'],   // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
        radius: [0, '70%'],       // 饼图的半径
        data: [                   // 系列中的数据内容数组
          // { value: 55, name: '北京', },
          // { value: 20, name: '武汉', },
          // { value: 10, name: '杭州', },
          // { value: 20, name: '广州', },
          // { value: 38, name: '上海', }
        ],
      },
    ],
  },

  // 折线图
  line: {
    tooltip: {
      show: true,
      trigger: 'axis',
      textStyle: {
        fontSize: 12,
      },
    },
    grid: {                       // 直角坐标系网格
      containLabel: true,         // grid 区域是否包含坐标轴的刻度标签
      left: 0,                    // grid 组件离容器左侧的距离。
      top: 20,
      right: 30,
      bottom: 0,
    },
    xAxis: {                      // 直角坐标系 grid 中的 x 轴
      // show: false,                // 是否显示 x 轴
      type: 'category',           // 坐标轴类型 'value'|'category'|'time'|'log'
      name: 'x轴',                // 坐标轴名称显示位置
      // nameLocation: 'end',        // 坐标轴名称显示位置
      nameGap: 5,                 // 坐标轴名称与轴线之间的距离
      boundaryGap: true,          // 坐标轴两边留白策略
      axisTick: {                 // 坐标轴轴线相关设置。
        show: false,              // 是否显示坐标轴轴线
      },
      axisLabel: {                // 坐标轴刻度标签的相关设置
        interval: 0,              // 坐标轴刻度标签的显示间隔
        hideOverlap: false,       // 是否隐藏重叠的标签
        fontSize: 10,
        // rotate: '-45',
      },
      data: [                     // 类目数据
        // '黄逸昊', '卢燕君', '陈晓虹', '梁慧敏', '刘嘉如'
      ],
    },
    yAxis: {                      // 直角坐标系 grid 中的 y 轴
      // show: false,                // 是否显示 y 轴
      type: 'value',              // 坐标轴类型 'value'|'category'|'time'|'log'
      // name: 'y轴',                // 坐标轴名称显示位置
      // nameLocation: 'end',        // 坐标轴名称显示位置
      // nameGap: 5,                 // 坐标轴名称与轴线之间的距离
      // boundaryGap: true,          // 坐标轴两边留白策略
      axisLabel: {                // 坐标轴刻度标签的相关设置
        fontSize: 10,
      },
      splitLine: {                // 坐标轴在 grid 区域中的分隔线
        lineStyle: {              // 分隔线
          // color: ['#aaa', '#ddd'],
          type: 'dashed',         // 线的类型
        },
      },
    },
    // dataZoom: [                   // 用于区域缩放
    //   {                           // 2.在内部可以横向拖动
    //     type: 'inside',           // 内置于坐标系中
    //     start: 0,
    //     end: 30,
    //     xAxisIndex: [0],
    //   },
    // ],
    series: [
      // {
      //   name: '记录数',            // 系列名称
      //   type: 'line',              // 类型
      //   label: {                   // 图形上的文本标签
      //     show: true,              // 是否显示标签
      //     position: 'top',         // 标签的位置
      //     fontSize: 10,
      //   },
      //   smooth: true,              // 是否平滑曲线显示
      //   data: [                    // 系列中的数据内容数组
      //     // 4, 3, 3, 2, 1,          
      //   ],
      // },
    ],
  },

  // 柱状图
  bar: {
    tooltip: {
      show: true,
      trigger: 'axis',
      axisPointer: {              // 指示器
        type: 'shadow',           // 指示器类型 'line'|'shadow'|'none'|'cross'
      },
      textStyle: {
        fontSize: 12,
      },
    },
    grid: {                       // 直角坐标系网格
      containLabel: true,         // grid 区域是否包含坐标轴的刻度标签
      left: 0,                    // grid 组件离容器左侧的距离。
      top: 20,
      right: 20,
      bottom: 0,
    },
    xAxis: {                      // 直角坐标系 grid 中的 x 轴
      // show: false,                // 是否显示 x 轴
      type: 'category',           // 坐标轴类型 'value'|'category'|'time'|'log'
      name: 'x轴',                // 坐标轴名称显示位置
      // nameLocation: 'end',        // 坐标轴名称显示位置
      nameGap: 5,                 // 坐标轴名称与轴线之间的距离
      boundaryGap: true,          // 坐标轴两边留白策略
      axisTick: {                 // 坐标轴轴线相关设置。
        show: false,              // 是否显示坐标轴轴线
      },
      axisLabel: {                // 坐标轴刻度标签的相关设置
        interval: 0,              // 坐标轴刻度标签的显示间隔
        hideOverlap: false,       // 是否隐藏重叠的标签
        fontSize: 10,
        rotate: '40',
      },
      data: [                     // 类目数据
        // '黄逸昊', '卢燕君', '陈晓虹', '梁慧敏', '刘嘉如'
      ],
    },
    yAxis: {                      // 直角坐标系 grid 中的 y 轴
      // show: false,                // 是否显示 y 轴
      type: 'value',              // 坐标轴类型 'value'|'category'|'time'|'log'
      // name: 'y轴',                // 坐标轴名称显示位置
      // nameLocation: 'end',        // 坐标轴名称显示位置
      // nameGap: 5,                 // 坐标轴名称与轴线之间的距离
      // boundaryGap: true,          // 坐标轴两边留白策略
      axisLabel: {                // 坐标轴刻度标签的相关设置
        fontSize: 10,
      },
      splitLine: {                // 坐标轴在 grid 区域中的分隔线
        lineStyle: {              // 分隔线
          // color: ['#aaa', '#ddd'],
          type: 'dashed',         // 线的类型
        },
      },
    },
    // dataZoom: [                   // 用于区域缩放
    //   {                           // 2.在内部可以横向拖动
    //     type: 'inside',           // 内置于坐标系中
    //     start: 0,
    //     end: 30,
    //     xAxisIndex: [0],
    //   },
    // ],
    series: [
      {
        name: '记录数',            // 系列名称
        type: 'bar',              // 类型
        // stack: 'Ad',               // 数据堆叠
        label: {                   // 图形上的文本标签
          show: true,              // 是否显示标签
          position: 'top',         // 标签的位置
          fontSize: 10,
        },
        data: [                    // 系列中的数据内容数组
          // 4, 3, 3, 2, 1,          
        ],
      },
    ],
  },
}

// 图表假数据初始化
// import * as echarts from '../../ec-canvas/echarts'
import * as echarts from '../../ec-canvas/echarts.min.js'
function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {
    grid: {
      containLabel: true,
      left: 0,
      top: 20,
      // right: 56,
      right: 30,
      bottom: 0,
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: ['黄逸昊', '卢燕君', '陈晓虹', '梁慧敏', '刘嘉如'],
      // show: false
      axisTick: {
        show: false,      // 隐藏x轴刻度
      },
      axisLabel: {        // x轴 label
        fontSize: 10,
      },
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        },
      },
      // show: false
      axisLabel: {        // y轴 label
        fontSize: 10,
      },
    },
    series: [{
      name: '记录数',
      type: 'line',
      smooth: true,
      data: [4, 3, 3, 2, 1,],
      label: {
        show: true,
        distance: 0,
        fontSize: 10,
      },
    },]
  };

  chart.setOption(option)
  return chart
}

function setOption(item, yData, xData) {
  let type = item.component_type
  if(type === 'ranking') type = 'line'
  let option = JSON.parse(JSON.stringify(options[type]))
  if(type === 'pie') {  // 饼图
    option.series[0].data = yData
  } else if(['line', 'bar', ].includes(type)) { // 折线图、柱状图
    option.series = yData
    option.xAxis.data = xData
    option.xAxis.name = item.xName

    let name = item.xName,
        xLen = (name || '').length,
        mul = 4
    if(xLen) {
      option.grid.right = xLen * 13.5
      if(xLen > mul) {
        option.grid.right = mul * 13.5
        let nameArr = []
        for(let i = 0, len = Math.ceil(xLen / mul); i < len; i++) {
          nameArr.push(name.slice(i * mul, (i + 1) * mul))
        }
        option.xAxis.name = nameArr.join('\n')
      }
    }
  }

  return option
}



module.exports = {
  setOption,
  initChart,
}